<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
	<!-- 视口标签，禁止用户在移动端随意拉动 -->
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>detail</title>
	<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="../lib/button/buttons.css">
	<link rel="stylesheet" href="../lib/bootstrapvalidator/dist/css/bootstrapValidator.min.css">

	<link rel="stylesheet" href="../css/common.css">
	<style type="text/css">
  .register-box .register-checkbox input[type=checkbox] {
   margin-left: 4px;

 }
 .register-box .register-checkbox span {
   margin-left: 20px;
 }

 .register-box .register-registerBtn p{
   padding-top: 20px;
 }


 .register-box .otherword {
   margin-top: 20px;

 }

	/*.register-box .form-item {
		margin-bottom: 26px;
   }*/
 </style>

	 <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	<header id="header"></header>


  	<section>
  		<!-- 注册信息填写 -->
  		<div class="container">
  			<div class="row">
  				<div class="col-md-8 col-md-offset-2 register-box">
  					<div class="page-header">
  						<h2 class="page-title">欢迎注册</h2>
  					</div>

  					<form id="defaultForm" class="form-horizontal">
  						<div class="form-group form-item">
  							<label class="col-md-3 control-label">手机号码</label>
  							<div class="col-md-6">
  								<input type="text" class="form-control" name="phoneNum" placeholder="请输入手机号" id="phoneNum" />
  							</div>
  						</div>
  						<div class="form-group form-item">
  							<label class="col-md-3 control-label">登录密码</label>
  							<div class="col-md-6">
  								<input type="password" class="form-control" name="password" placeholder="创建您的密码" />
  							</div>
  						</div>

  						<div class="form-group form-item">
  							<label class="col-md-3 control-label">确认密码</label>
  							<div class="col-md-6">
  								<input type="password" class="form-control" name="samepwd" placeholder="请确认密码" />
  							</div>
  						</div>

             <div class="form-group form-item">
              <label class="col-md-3 control-label">验证码</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="imgCode" placeholder="输入图片验证码" id="imgCode" />
              </div>
            </div>

            <div class="form-group form-item">
              <div class="col-md-4 col-md-offset-3 ValidateCode">
                <img class="img-thumbnail" src="../img/ShowValidateCode.jpg" alt="验证码" />
                <a href="javascript:" id="changeCode">看不清？换一张</a>
              </div>
            </div>





            <div class="form-group form-item">
             <label class="col-md-3 control-label">短信验证码</label>
             <div class="col-md-6">
              <div class="input-group">
               <input type="text" class="form-control" placeholder="输入短信验证码" name="vcode">
               <span class="input-group-btn">
                <button class="btn btn btn-primary" type="button" id="vcodeBtn">获取验证码</button>
              </span>
            </div><!-- /input-group -->
          </div><!-- /.col-md-6 -->
        </div>
        <div class="form-group form-item">
          <div class="col-md-6 col-md-offset-3">
            <div class="checkbox register-checkbox">
              <input type="checkbox" name="acceptTerms" class="" />
              <span>我已阅读并同意
                <a href="/zh-cn/about/agreement/" target="_blank">《用户协议》</a></span>
              </div>
            </div>
          </div>



          <div class="col-md-6 col-md-offset-3 register-registerBtn">
           <button type="submit" class="button button-glow button-rounded button-highlight btn-block">注册</button>

           <p>已有账号？<a href="login.html">去登录</a></p>
         </div>
       </form>

       <div class="col-md-6 col-md-offset-3 otherword">

        <p class="text-muted">请妥善保存您的网站账号及登录密码。</p>
        <p class="text-muted">请勿和其他网站使用相同的登录密码。</p>



      </div>
    </div>

  </div>
</div>

</section>

<footer id="footer"></footer>
<!-- 底部内容end -->
<script src="../lib/jquery/jquery-2.1.1.js"></script>
<script src="../lib/layer/layer.js"></script>

<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../lib/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>


<script type="text/javascript">
  $(function () {

   $('#header').load('../common/nav.html');
   $('#footer').load('../common/footer.html');

   $("#changeCode").on("click", function () {
                    //利用现在的毫秒数作为随机数，改变验证码
                    $("#codeImg").attr("src", "/Login/ShowValidateCode?d=" + new Date().getMilliseconds() + "");
                  });

              // 按钮禁用方法
              function invokeSettime(obj){
              	var countdown=90;
              	settime(obj);
              	function settime(obj) {
              		if (countdown == 0) {
              			$(obj).attr("disabled",false);
              			$(obj).text("获取验证码");
              			countdown = 90;
              			return;
              		} else {
              			$(obj).attr("disabled",true);
              			$(obj).text(countdown+'秒后重新发送');
              			countdown--;
              		}
              		setTimeout(function() {
              			settime(obj) }
              			,1000);
              	}
              }


  				 // 获取验证码
  				 $('#vcodeBtn').on('click',function () {



  				// 校验指定字段
         $('#defaultForm').data('bootstrapValidator').validateField('phoneNum');

         $('#defaultForm').data('bootstrapValidator').validateField('imgCode')

          // 获取校验结果
          var phoneResult = $('#phoneNum').next().hasClass('glyphicon-remove');
          var imgCodeResult = $('#imgCode').next().hasClass('glyphicon-remove');


          if (phoneResult ==true || imgCodeResult ==true) {
            return;
          }
          else{
            var phoneNum = $('#phoneNum').val();
            var imgCode = $('#imgCode').val();

              // 校验图片验证码和手机号
              $.ajax({
                url: '',
                data: {phoneNum: phoneNum,imgCode:imgCode},
                type: 'POST',
                dataType: 'json',
                xhrFields: {
                  withCredentials: true
                },
                success:function(data) {
                      // data用:分割 [0]是手机号，[1]是图片验证码
                      var serverData = data.split(':');
                      if (serverData[0] == 0) {

                        layer.tips('手机号已被注册！', '#phoneNum');
                        return;
                      }
                      if (serverData[1] == 0) {

                        layer.tips('图片验证码错误！', '#imgCode');
                        return;
                      }

                      // 验证成功，发送手机验证码
                      $.ajax({
                        url: 'http://192.168.43.3/Account/SendCode',
                        data: {account: phoneNum,action:'add'},
                        type: 'POST',
                        dataType: 'json',
                        xhrFields: {
                          withCredentials: true
                        },
                        success:function(data) {

                         layer.msg('已发送', {icon: 1,time:900 });

                       },
                       error:function()
                       {
                         layer.msg('发送失败！请稍后再试', {icon: 2,time:900 });

                       }
                     })


                      new invokeSettime("#vcodeBtn");
                      



                    }
                  })


            }


          });


  				 $('#defaultForm').bootstrapValidator({
  				 	message: '这个值是假的兄弟！',
  				 	feedbackIcons: {
  				 		valid: 'glyphicon glyphicon-ok',
  				 		invalid: 'glyphicon glyphicon-remove',
  				 		validating: 'glyphicon glyphicon-refresh'
  				 	},
            // trigger: 'change',
            fields: {
             password: {
              message: '输入值无效',
              validators: {
               notEmpty: {
                message: '密码不能为空！'
              },
              regexp: {/* 包含正则表达式，和提示 */
                regexp: /^(?![^a-zA-Z]+$)(?!\D+$)/,
                message: '密码必须包含至少一位数字和一位字母！'


              },
              stringLength: {
                min: 6,

                message: '密码至少为6位！'
              }
            }
          },
          samepwd: {
            message: '输入值无效',

            validators: {
             notEmpty: {
              message: '确认密码不能为空！'
            },
            identical: {
              field: 'password',
              message: '确认密码和密码不一致!'
            }



          }
        },

        phoneNum: {

          validators: {
           message: '输入值无效',

           notEmpty: {
            message: ' 手机号码不能为空！'
          },
          regexp: {/* 包含正则表达式，和提示 */
            regexp: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
            message: '请输入正确的手机号！'

          }

        }

      },
      imgCode: {

        validators: {
          notEmpty: {
            message: '图片验证码不能为空！'
          },
          stringLength: {
            min: 4,

            message: '验证码有误！'
          }
        }

      },
      acceptTerms: {
        validators: {
          notEmpty: {
            message: '请确认是否同意！'
          }

        }

      },

      vcode: {

        validators: {
         notEmpty: {
          message: '短信验证码不能为空！'
        }

      }
    }


  }
        }).on('success.form.bv', function (e) {//这是当表单检验成功通过时的事件
            // Prevent form submission
            //阻止表单再次提交
            e.preventDefault();

            console.log("ok");

            //表单提交成功后，请清空表单内容
            // Get the form instance获取表单的的对象
            var $form = $(e.target);

            // // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data 这里提交到后台处理使用 ajax
            //  $.post($form.attr('action'), $form.serialize(), function(result) {
            // //      console.log(result);
            //    }, 'json');


            $.ajax({
              url: 'http://192.168.43.3/Account/SendCode',
              data: {account: phoneNum,action:'add'},
              type: 'POST',
              dataType: 'json',
              xhrFields: {
                withCredentials: true
              },
              success:function(data) {

                layer.msg('已发送', {icon: 1,time:900 });

              },
              error:function()
              {
                layer.msg('发送失败！请稍后再试', {icon: 2,time:900 });

              }
            });


          });











      })



    </script>
  </body>
  </html>